<template>
  <base-view :model="query" @submit="search" class="custom">
    <template v-slot:params>

      <a-col :md="12" :sm="24" v-show="query.instId != ''">
        <a-form-item label="收单机构">
          <!--          :filter-option="filterOption"-->
          <a-select mode="default" :allowClear="true" style="width: 100%" show-search placeholder="请选择收单机构"
            option-filter-prop="children" @focus="selectOrganization" @search="selectOrganization"
            @select="setOrganizationValue" v-model="query.acqInstCode">
            <a-select-option v-for="(d, index) in acqInstCodeList" :key="index">
              {{ d.id }}-{{ d.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24" v-show="query.instId != ''">
        <a-form-item label="商户号">
          <a-input v-model="query.mchntNo" />
        </a-form-item>
      </a-col>
      <a-col :md="12" :sm="24" v-show="query.instId != ''">
        <a-form-item label="批次日期">
          <range-date @change="handleDateChange" style="width: 100%" format="YYYYMMDD"></range-date>
        </a-form-item>
      </a-col>
      <a-col :span="24" v-show="query.instId != ''">
        <a-button type="primary" html-type="submit">查询</a-button>
        <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
      </a-col>

    </template>
    <div class="section">
      <div class="btn-group">
        <!-- <a-button type="primary" @click="openModal()">
          <a-icon type="plus" />
          <span>增加</span>
        </a-button> -->
        <a-button type="primary" @click="exportExcel()">导出</a-button>
      </div>

      <a-table ref="table" :columns="columns" :dataSource="dataSource" :rowKey="
        (record, index) => {
          return index;
        }
      " @change="pageChange" @showSizeChange="pageChange" :loading="loading" :pagination="pagination"
        :scroll="{ x: 1500 }">
        <template slot="operation" slot-scope="text, record">
          <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)"
            v-if="record.mchntLevelStatus !== '02' && record.mchntLevelStatus !== '03'" title="修改"
            v-has-permission="['OrgChargeReport:update']"></a-icon>
          <a-icon type="eye" theme="twoTone" twoToneColor="#4a9ff5" @click="view(record)" title="详情"
            v-has-permission="['OrgChargeReport:view']"></a-icon>
          <a-icon type="delete" theme="twoTone" twoToneColor="#4a9ff5" title="注销"
            v-if="record.mchntLevelStatus !== '03'" @click="cancel(record)" v-hasPermission="['agentInfo:delete']">
          </a-icon>
          <a-badge status="warning" text="无权限" v-has-no-permission="[
            'OrgChargeReport:view',
            'OrgChargeReport:update',
            'OrgChargeReport:delete',
          ]"></a-badge>
        </template>
      </a-table>
    </div>
    <a-modal v-model="modalVisible" :title="modalTitle" width="1050px" @ok="submit" :maskClosable="false"
      :footer="isHideFoot ? null : undefined">
      <mchnt-level-operation ref="modalForm" />
    </a-modal>
  </base-view>
</template>

<script>
import RangeDate from '@/components/datetime/RangeDate'
export default {
  name: "OrgChargeReport",
  components: { RangeDate },
  data() {
    return {
      form: this.$form.createForm(this),
      beanInfo: {},
      modalVisible: false,
      isHideFoot: false,
      modalTitle: "",
      operationType: "add",
      //排序
      sortedInfo: null,
      //时间变量
      timeForm: [],
      acqInstCodeList: [],
      //查询数据
      query: {
        instId: "", 
        batchDate: "", 
        mchntNo: "", 
        feeIncome: "", 
        cupsFee: "",
        startDate: "", 
        endDate: "", 
        acqInstCode: "", 
        acqInstNm: "", 
        mchntName: "",
        mchntActualFee: "", 
        acctStatus: ""
      },
      loading: false,
      //分页
      pagination: {
        pageNum: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      //标题
      columns: [
        {
          title: "法人行号",
          dataIndex: "instId",
          width: 200,
        },
        {
          title: "批次日期",
          dataIndex: "batchDate",
          width: 200,
        },
        {
          title: "分支机构号",
          dataIndex: "acqInstCode",
          width: 200,
        },
        // {
        //   title: "分支机构名称",
        //   dataIndex: "acqInstNm",
        //   width: 200,
        // },
        {
          title: "商户号",
          dataIndex: "mchntNo",
          width: 200,
        },
        {
          title: "商户名称",
          dataIndex: "mchntName",
          width: 200,
        },
        {
          title: "交易笔数",
          dataIndex: "transNum",
          width: 200,
        },
        {
          title: "交易金额",
          dataIndex: "transAmt",
          width: 200,
        },
        {
          title: "实收商户手续费",
          dataIndex: "mchntActualFee",
          width: 200,
        },
        {
          title: "商户优惠手续费",
          dataIndex: "mchntDiscountFee",
          width: 200,
        },
        {
          title: "手续费核心记账状态",
          dataIndex: "acctStatus",
          width: 150,
          customRender: (text) => {
            return text ? {
              "00": '待记账',
              "01": '记账成功',
              "02": '记账失败',
            }[text] : ""
          }
        },
      ],
      //数据源
      dataSource: [],
    };
  },
  methods: {
    //收单机构
    selectOrganization(val) {
      try {
        this.$get("/admin/merParam/UpmpOrganization/instIdOrganizationSelect2List", {
          q: encodeURIComponent(`&${this.query.instId}`)
        }).then((r) => {
          this.acqInstCodeList = r.data.results;
          console.log("this.acqInstCodeList ===", this.acqInstCodeList)
        });

      } catch (e) {
        console.error(e);
      }
    },
    setOrganizationValue(index) {
      this.query.acqInstCode = this.acqInstCodeList[index].name
      // console.log("this.acqInstCodeList[index].name====", this.acqInstCodeList[index].name)
    },
    async submit() {
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.defaultCurrent = 1;
        await this.search();
      }
    },
    async reset() {
      this.query = { instId: this.query.instId }
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      await this.search();
    },
    async search(e) {
      e && e.preventDefault && e.preventDefault();
      try {
        //访问路径 接口
        const res = await this.$get("/admin/csmc/MchntFeeInfoReport/list", {
          //属性赋值
          instId: this.query.instId,
          acqInstNm: this.query.acqInstNm,
          mchntName: this.query.mchntName,
          batchDate: this.query.batchDate,
          mchntNo: this.query.mchntNo,
          acqInstCode: this.query.acqInstCode,
          feeIncome: this.query.feeIncome,
          cupsFee: this.query.cupsFee,
          //分页参数
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
          //时间
          startDate: this.query.startDate,
          endDate: this.query.endDate,
        });
        this.dataSource = res.data.rows;
        // console.log('000000',this.dataSource)
        // debugger
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        console.error(e);
      }
    },
    //时间
    handleDateChange(value) {
      if (value) {
        this.query.batchDate=value[0]
        this.query.startDate = value[0]
        this.query.endDate = value[1]
      }
    },
    //导出
    exportExcel() {
      let { sortedInfo } = this
      let sortField, sortOrder
      // 获取当前列的排序和列的过滤规则
      if (sortedInfo) {
        sortField = sortedInfo.field
        sortOrder = sortedInfo.order
      }
      this.$export('/admin/csmc/MchntFeeInfoReport/gridExport', {
        sortField: sortField,
        sortOrder: sortOrder,
        ...this.query
      })
    },
    openModal(type = "add", beanInfo) {
      this.modalTitle = {
        add: "新增",
        edit: "编辑",
        view: "详情",
        cancel: "注销",
      }[type];
      this.modalVisible = true;
      if (type === 'view') {
        this.isHideFoot = true;
      } else {
        this.isHideFoot = false
      }
      this.$nextTick(() => {
        this.$refs.modalForm.setOperatorType(type);
        if (type === "edit" || type === "view" || type === "cancel") {
          this.$refs.modalForm.setBeanInfo(beanInfo);
        }
        this.$refs.modalForm.resetFields(this.query.instId);
      });
    },
    async edit(item) {
      this.openModal("edit", item);
    },
    view(item) {
      this.openModal("view", item);
    },
    cancel(item) {
      this.openModal("cancel", item);
    },

    pageChange(e) {
      this.pagination.pageNum = e.current;
      this.pagination.pageSize = e.pageSize;

      this.search();
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../static/less/Common";
</style>
